body {
    background-image: url('/static/images/bg.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.no-wrap {
    white-space: nowrap;
}

.vh-center {
    display: flex;
    align-items: center;
    white-space: nowrap;
}



/* 为时间显示和搜索框的容器添加一个特定的类，例如 "time-search-container" */
.time-search-content-container {
  max-width: 100%; /* 容器宽度最大为100% */
  padding: 10px; /* 内边距 */
  box-sizing: border-box; /* 包括内边距和边框在内的总宽度 */
  display: flex; /* 使用flex布局 */
  flex-direction: column; /* 垂直排列子元素 */
  align-items: center; /* 垂直居中子元素 */
}

/* 时间显示样式 */
.time-search-content-container #current-time {
  font-size: 3rem; /* 时间字体大小 */
  margin-bottom: 20px; /* 与搜索框的间距 */
    color:rgba(100,100,100, 1);

}

/* 搜索框样式 */
.time-search-content-container .input-group {
  width: 100%; /* 输入组宽度为100% */
  max-width: 600px; /* 搜索框最大宽度 */
}


/* 搜索框中的字体样式 */
.time-search-content-container .input-group input,
.time-search-content-container .input-group .btn {
  font-size: 1rem; /* 默认字体大小 */
}

.input-group-prepend .select-engine {
    flex: 0 0 150px; /* 设置选择框的宽度为150px，不随容器变化 */
}

.input-group-append .btn {
    flex: 0 0 auto; /* 按钮宽度自动调整，但不会超过其内容的宽度 */
}


.input-group {
    background: rgba(0, 0, 0, 0.2); /* 黑色背景，透明度为0.2 */
    border-radius: 0.25rem; /* 圆角边框 */
    backdrop-filter: blur(5px); /* 毛玻璃效果 */
    transition: background 0.3s ease; /* 平滑过渡效果 */
}

.input-group input,
.input-group select {
    background-color: transparent; /* 输入框背景透明 */
    color: white; /* 文字颜色 */
    border: none; /* 无边框 */
    caret-color: white; /* 设置光标颜色 */
}

.input-group input::placeholder {
    color: white; /* 占位符颜色 */
    opacity: 0.6; /* 占位符透明度 */
}

.input-group button {
    background-color: transparent; /* 按钮背景透明 */
    color: white; /* 按钮文字颜色 */
    border: none; /* 无边框 */
    transition: color 0.3s ease; /* 平滑过渡效果 */
}

.input-group button:hover {
    color: #ddd; /* 按钮悬停时的文字颜色 */
}







/* 媒体查询，用于在小屏幕上调整样式 */
@media (max-width: 768px) {
  .time-search-content-container #current-time {
    font-size: 2rem; /* 在小屏幕上减小时间字体大小 */
  }

  .time-search-content-container .input-group {
    max-width: 85%; /* 在小屏幕上搜索框宽度跟随屏幕宽度 */
  }

  /* 在小屏幕上减小搜索框中的字体大小 */
  .time-search-content-container .input-group input,
  .time-search-content-container .input-group .btn {
    font-size: 0.875rem; /* 小屏幕上的字体大小 */
  }
}











/* 默认字体大小 */
#current-time {
    font-size: 3rem; /* 适用于大屏幕 */
}

/* 中等屏幕的字体大小 */
@media (max-width: 992px) {
    #current-time {
        font-size: 2.5rem; /* 适用于中等屏幕 */
    }
}

/* 小屏幕的字体大小 */
@media (max-width: 768px) {
    #current-time {
        font-size: 2rem; /* 适用于小屏幕 */
    }
}

/* 非常小的屏幕的字体大小 */
@media (max-width: 576px) {
    #current-time {
        font-size: 1.5rem; /* 适用于非常小的屏幕 */
    }
}





/*.icon-item {
  display: inline-block; *//* 使元素为行内块，以便可以设置宽高 *//*
  margin: 15px; *//* 图标之间的间距 *//*
  position: relative; *//* 设置相对定位，以便子元素可以相对于此定位 *//*
}

.icon-item a {
  display: flex; *//* 使用flex布局来垂直排列图像和文本 *//*
  flex-direction: column; *//* 垂直排列 *//*
  align-items: center; *//* 垂直居中对齐 *//*
  text-decoration: none; *//* 去除链接的下划线 *//*
  color: inherit; *//* 继承父元素的文本颜色 *//*
}

.icon-item img {
  border: none; *//* 确保图片没有边框 *//*
  width: 48px;
  height: 48px;
  border-radius: 20%; *//* 设置为50%使图片成为圆形 *//*
  transition: box-shadow 0.3s ease; *//**//* 平滑过渡阴影效果 *//*
*//*  box-shadow: 0 0 3px rgba(0,0,0,1); *//**//* 添加阴影 *//*
}

.icon-item p {
  margin-top: 10px; *//* 图标和文字之间的间距 *//*
  font-size: 0.75rem; *//* 调整文字大小 *//*

}
.icon-label {
  color: rgba(100, 100, 100, 0.8); *//* R | G | B
  text-shadow: 0 0 3px rgba(0,0,0,0.3); *//* 水平偏移 | 垂直偏移 | 模糊半径 | 颜色 *//*
}

*//* 鼠标悬停时的效果，仅对图片 *//*
.icon-item:hover img {
  box-shadow: 0 0 7px rgba(0,0,0,1); *//* 添加阴影 *//*
}








.icon-item {
  margin: 10px; *//* 图标项之间的外边距 *//*
  *//* 其他样式保持不变 *//*
}

*//* 媒体查询，用于在小屏幕上调整icon-item的尺寸 *//*
@media (max-width: 576px) {
.icon-item {
  margin: 5px;
  width: 40px; *//* 在小屏幕上减小宽度 *//*
}

.icon-item img {
  width: 30px; *//* 在小屏幕上减小图片宽度 *//*
  height: 30px; *//* 在小屏幕上减小图片高度 *//*
}

.icon-item p {
  font-size: 0.625rem; *//* 在小屏幕上减小文字大小 *//*
}
}
@media (max-width: 576px) {
  .icon-label {
    display: none;
  }
}*/



.container {
  display: flex; /* 启用Flexbox布局 */
  flex-wrap: wrap; /* 允许子元素换行 */
  justify-content: center; /* 水平居中对齐子元素 */
  align-items: center; /* 垂直居中对齐子元素 */
  padding: 10px; /* 容器内边距 */
}

.card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.card {
    display: flex;
    align-items: center; /* 垂直居中 */
    width: 250px; /* 卡片宽度 */
    border: 1px solid #ccc; /* 卡片边框 */
    border-radius: 5px; /* 卡片圆角 */
    overflow: hidden; /* 防止内容溢出 */
    margin: 10px; /* 卡片间距 */
    transition: box-shadow 0.3s; /* 过渡效果 */
    cursor: pointer; /* 鼠标悬停时显示手型 */
    text-decoration: none; /* 确保整个卡片没有下划线 */
}

.card:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* 鼠标悬停时的阴影 */
}

.card-content {
    padding: 10px;
    flex-grow: 1; /* 内容区域填充剩余空间 */

}

.card-title {
    font-size: 16px; /* 标题字体大小 */
    margin: 0 0 5px; /* 标题外边距 */
}

.card-description {
    font-size: 14px; /* 说明字体大小 */
    color: #666; /* 说明字体颜色 */
}

.card-icon {
    width: 60px; /* 图标宽度 */
    height: 60px; /* 图标高度 */
/*
    background-image: url('https://www.ljha.fun:50390/favicon.ico'); */
/* 使用您提供的图标链接 *//*

    background-size: cover; /* 图标覆盖整个区域 */
    background-position: center; /* 图标居中 */
}